Xceed Logo
Shop
Xceed DataGrid for WPF v7.3 Documentation
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.3 / Xceed DataGrid for WPF / Code Snippets / Customizing Card Views
In This Topic
    Customizing Card Views
    In This Topic

    The following page provides a list of examples that demonstrate how to customize the appearance of card views. For more card view-related information, refer to the Card Views topic.

    All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.

    Adding an InsertionRow to the fixed headers

    The following example demonstrates how to add an InsertionRow to the fixed header section of a grid. 

    XAML
    Copy Code 
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                     Source="{Binding Source={x:Static Application.Current},
                                                       Path=Orders}"/>
   </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.View>
         <xcdg:TableView>

           <xcdg:TableView.FixedHeaders>
              <DataTemplate>
                 <xcdg:InsertionRow/>
              </DataTemplate>
           </xcdg:TableView.FixedHeaders>
         </xcdg:TableView>
      </xcdg:DataGridControl.View>
   </xcdg:DataGridControl>
</Grid>

    Clearing a fixed header section

    The following example demonstrates how to clear the content of all header and footer sections of a grid using its view's UseDefaultHeadersFooters property.

    XAML
    Copy Code 
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
   </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.View>
         <xcdg:CardView UseDefaultHeadersFooters="False"/>
       </xcdg:DataGridControl.View>
   </xcdg:DataGridControl>
</Grid>
    VB.NET
    Copy Code 
    Dim view As New CardView()
view.UseDefaultHeadersFooters = False
dataGridControl.View = view
    C#
    Copy Code 
    CardView view = new CardView();
view.UseDefaultHeadersFooters = false;
dataGridControl.View = view;

    Changing the main (primary) column

    The following example demonstrates how to set the ShipName column as a grid's main column. 

    XAML
    Copy Code 
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
   </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}"
                         View="CardView">
      <xcdg:DataGridControl.Columns>
        <xcdg:Column FieldName="ShipName" IsMainColumn="True"/>
      </xcdg:DataGridControl.Columns>
   </xcdg:DataGridControl>
</Grid>
    VB.NET
    Copy Code 
    dataGridControl.Columns( "ShipName" ).IsMainColumn = True
    C#
    Copy Code 
    dataGridControl.Columns[ "ShipName" ].IsMainColumn = true;

    Adding separator lines

    The following examples demonstrates how to add separator lines between card "columns".

    XAML
    Copy Code 
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
   </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.View>
         <xcdg:CardView>

           <xcdg:CardView.SeparatorLinePen>
             <Pen Thickness="1.5" Brush="Orange"
                  DashStyle="{x:Static DashStyles.DashDotDot}"/>
           </xcdg:CardView.SeparatorLinePen>
         </xcdg:CardView>
      </xcdg:DataGridControl.View>
   </xcdg:DataGridControl>
</Grid>
    VB.NET
    Copy Code 
    Dim pen As New Pen()
pen.Thickness = 1.5
pen.Brush = Brushes.Orange
pen.DashStyle = DashStyles.DashDotDot

Dim view As New CardView()
view.SeparatorLinePen = pen

dataGridControl.View = view
    C#
    Copy Code 
    Pen pen = new Pen();
pen.Thickness = 1.5;
pen.Brush = Brushes.Orange;
pen.DashStyle = DashStyles.DashDotDot;

CardView view = new CardView();
view.SeparatorLinePen = pen;

dataGridControl.View = view;

     

    Recreating the default card-view header

    The following example demonstrates how to recreate the default card-view header, which contains a ColumnManagerRow to the right of a GroupByControl.

    XAML
    Copy Code 
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                                        Path=Orders}"/>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
    <xcdg:DataGridControl.View>
      <xcdg:CardView UseDefaultHeadersFooters="False">
        <xcdg:CardView.FixedHeaders>
         <DataTemplate>
           <DockPanel>
             <!-- OneWay binding is used because we want the ColumnManagerRow's height to
                  follow what is defined by the GroupByControl. A FallbackValue
                  is specified so the initial measure pass has an acceptable minimal
                  value.-->
             <xcdg:ColumnManagerRow DockPanel.Dock="Right"
                                    Height="{Binding ElementName=groupByControl,
                                                     Path=ActualHeight,
                                                     Mode=OneWay,
                                                     FallbackValue=60}"/>
             <xcdg:GroupByControl x:Name="groupByControl"/>
           </DockPanel>
         </DataTemplate>
        </xcdg:CardView.FixedHeaders>
      </xcdg:CardView>
    </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>

    Applying a grid background brush

    The following example demonstrates how to apply a one of the custom background brushes (provided by Xceed) to a grid's background.

    XAML
    Copy Code 
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
    <Grid.Resources>
       <xcdg:DataGridCollectionViewSource x:Key="cvs_products"
                                       Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/>
      
    </Grid.Resources>
   <xcdg:DataGridControl x:Name="ProductsGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_products}}"
                         Background="{x:Static xcdg:DataGridControlBackgroundBrushes.AuroraRed}">     
       <xcdg:DataGridControl.Columns>
          <xcdg:Column FieldName="ProductName"
                       IsMainColumn="True"/>
       </xcdg:DataGridControl.Columns>
       <xcdg:DataGridControl.View>
          <!-- In Cardflow 3D view, if a theme is not explicitly specified,
               the Elemental Black theme will be used. -->
          <xcdg:CardflowView3D CardHeightToViewportRatio="0.5"/>
       </xcdg:DataGridControl.View>
    </xcdg:DataGridControl>
 </Grid>
    VB.NET
    Copy Code 
    dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed
    C#
    Copy Code 
    dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed;

    Applying a card background brush

    The following example demonstrates how to apply one of the custom background brushes (provided by Xceed) cards (i.e., data rows) by creating an implicit style that targets DataRow and that sets the background property.

    XAML
    Copy Code 
    <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
    <Grid.Resources>
       <xcdg:DataGridCollectionViewSource x:Key="cvs_products"
                                    Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/>
      <Style TargetType="{x:Type xcdg:DataRow}">
         <Setter Property="Background"
                 Value="{x:Static xcdg:CardBackgroundBrushes.Retro}"/>
      </Style>  
    </Grid.Resources>
    <xcdg:DataGridControl x:Name="ProductsGrid"
                          ItemsSource="{Binding Source={StaticResource cvs_products}}">
       <xcdg:DataGridControl.Columns>
          <xcdg:Column FieldName="ProductName"
                       IsMainColumn="True"/>
       </xcdg:DataGridControl.Columns>
       <xcdg:DataGridControl.View>
          <xcdg:CardflowView3D CardHeightToViewportRatio="0.5">
             <xcdg:CardflowView3D.Theme>
                <xcdg:ChameleonTheme/>
             </xcdg:CardflowView3D.Theme>
          </xcdg:CardflowView3D>           
       </xcdg:DataGridControl.View>
    </xcdg:DataGridControl>
 </Grid>
     

     

     

    Copyright Xceed Software Inc

    Send Feedback